<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>睿途题库 - 管理后台</title>
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/remixicon.min.css" rel="stylesheet">
    
    <!-- 自定义样式 -->
    <link href="assets/css/ruitu.css" rel="stylesheet">
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col bg-education">
    <!-- 背景装饰元素 -->
    <div class="absolute inset-0 overflow-hidden -z-10">
        <div class="absolute top-10 left-10 w-40 h-40 rounded-full bg-primary/10 animate-float">
            <div class="w-full h-full flex items-center justify-center text-primary/20 text-6xl education-icon">
                <i class="ri-book-2-line text-xl"></i>
            </div>
        </div>
        <div class="absolute bottom-20 right-20 w-60 h-60 rounded-full bg-secondary/10 animate-float" style="animation-delay: -2s">
            <div class="w-full h-full flex items-center justify-center text-secondary/20 text-7xl education-icon">
                <i class="ri-graduation-cap-line text-xl"></i>
            </div>
        </div>
        <div class="absolute top-1/3 right-1/4 w-32 h-32 rounded-full bg-accent/10 animate-float" style="animation-delay: -4s">
            <div class="w-full h-full flex items-center justify-center text-accent/20 text-5xl education-icon">
                <i class="ri-lightbulb-line text-xl"></i>
            </div>
        </div>
        <div class="absolute bottom-1/3 left-1/3 w-28 h-28 rounded-full bg-primary/10 animate-float" style="animation-delay: -1s">
            <div class="w-full h-full flex items-center justify-center text-primary/20 text-4xl education-icon">
                <i class="ri-pencil-line text-xl"></i>
            </div>
        </div>
    </div>

    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300">
        <div class="flex items-center justify-between px-4 h-[72px] max-w-7xl mx-auto">
            <div class="flex items-center flex-1 justify-center">
                <a href="admin-dashboard.html" class="flex items-center space-x-2 mr-6 absolute left-4">
                    <div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center text-primary">
                        <i class="ri-question-answer-line text-lg"></i>
                    </div>
                    <h1 class="text-lg font-bold text-dark">睿途题库管理系统</h1>
                </a>
                
                <!-- 顶部导航 -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="admin-dashboard.html" class="nav-item active" data-section="dashboard" onclick="showMenu('dashboard-menu')">
                        <i class="ri-dashboard-line mr-2"></i> 仪表盘
                    </a>
                    <a href="#" class="nav-item" data-section="textbook" onclick="showMenu('textbook-menu')">
                        <i class="ri-book-open-line mr-2"></i> 教材版本
                    </a>
                    <a href="question-list.html" class="nav-item" data-section="question">
                        <i class="ri-book-2-line mr-2"></i> 题库管理
                    </a>
                    <a href="#" class="nav-item" data-section="exam">
                        <i class="ri-graduation-cap-line mr-2"></i> 考试管理
                    </a>
                    <a href="#" class="nav-item" data-section="statistics">
                        <i class="ri-bar-chart-2-line mr-2"></i> 数据分析
                    </a>
                    <a href="site-settings.html" class="nav-item" data-section="settings">
                        <i class="ri-settings-3-line mr-2"></i> 系统设置
                    </a>
                </div>
            </div>
            
            <div class="flex items-center">
                <button class="flex items-center justify-center w-8 h-8 text-muted hover:text-primary transition-colors relative">
                    <i class="ri-notification-3-line text-xl"></i>
                    <span class="absolute top-1 right-1 w-2 h-2 bg-accent rounded-full"></span>
                </button>
                <div class="flex items-center ml-1">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                    <span class="hidden md:inline text-sm font-medium text-dark ml-2">张老师</span>
                    <i class="ri-arrow-down-s-line text-muted ml-0.5"></i>
                </div>
                <button class="md:hidden ml-1 w-8 h-8 flex items-center justify-center text-muted hover:text-primary transition-colors" id="mobile-menu-button">
                    <i class="ri-menu-line text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow flex">
        <!-- 左侧导航栏 -->
        <aside id="sidebar" class="w-56 bg-sidebar-bg shadow-sidebar transition-all duration-300 h-[calc(100vh-72px)] sticky top-[72px] overflow-y-auto">
            <!-- 仪表盘菜单 -->
            <div id="dashboard-menu" class="sidebar-menu active">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">仪表盘</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item active">
                        <i class="ri-dashboard-3-line"></i>
                        <span>数据概览</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-line-chart-line"></i>
                        <span>趋势分析</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-pie-chart-2-line"></i>
                        <span>数据报表</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-notification-2-line"></i>
                        <span>系统通知</span>
                    </div>
                </div>
            </div>
            
            <!-- 教材版本菜单 -->
            <div id="textbook-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">教材版本</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-book-open-line"></i>
                        <span>人教版</span>
                    </div>
                    <div class="pl-8">
                        <div class="sidebar-item">
                            <span>七年级上册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>七年级下册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>八年级上册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>八年级下册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>九年级上册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>九年级下册</span>
                        </div>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-book-open-line"></i>
                        <span>北师大版</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-book-open-line"></i>
                        <span>苏教版</span>
                    </div>
                    <div class="border-t border-gray-200 my-2"></div>
                    <div class="sidebar-item">
                        <i class="ri-add-line"></i>
                        <span>添加新版本</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-settings-line"></i>
                        <span>版本管理</span>
                    </div>
                </div>
            </div>
            
            <!-- 题库管理菜单 -->
            <div id="question-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">题库管理</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <a href="question-list.html" class="flex items-center space-x-3">
                            <i class="ri-file-list-3-line"></i>
                            <span>题目列表</span>
                        </a>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-add-circle-line"></i>
                        <span>添加题目</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-folder-line"></i>
                        <span>题目分类</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-price-tag-3-line"></i>
                        <span>标签管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-flag-line"></i>
                        <span>待审核题目</span>
                    </div>
                </div>
            </div>
            
            <!-- 考试管理菜单 -->
            <div id="exam-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">考试管理</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-calendar-line"></i>
                        <span>考试安排</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-file-text-line"></i>
                        <span>试卷管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-add-circle-line"></i>
                        <span>创建试卷</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-group-line"></i>
                        <span>考生管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-check-double-line"></i>
                        <span>成绩管理</span>
                    </div>
                </div>
            </div>
            
            <!-- 数据分析菜单 -->
            <div id="statistics-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">数据分析</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-bar-chart-line"></i>
                        <span>答题统计</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-line-chart-fill"></i>
                        <span>学习进度</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-pie-chart-line"></i>
                        <span>正确率分析</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-user-line"></i>
                        <span>用户行为</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-download-line"></i>
                        <span>数据导出</span>
                    </div>
                </div>
            </div>
            
            <!-- 系统设置菜单 -->
            <div id="settings-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">系统设置</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <a href="site-settings.html" class="flex items-center space-x-3">
                            <i class="ri-global-line"></i>
                            <span>站点设置</span>
                        </a>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-user-settings-line"></i>
                        <span>注册设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-settings-4-line"></i>
                        <span>基础设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-shield-keyhole-line"></i>
                        <span>安全设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-admin-line"></i>
                        <span>角色权限</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-database-2-line"></i>
                        <span>数据备份</span>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 内容区域 -->
        <div class="flex-grow p-4">
            <!-- 仪表盘内容 -->
            <div id="dashboard-content" class="content-section active">
                <!-- 页面标题 -->
                <div class="mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">数据概览</h2>
                    <p class="text-muted mt-2">今日是 <span id="currentDate" class="font-medium text-dark"></span>，题库管理系统为您提供全面的试题管理功能</p>
                </div>
                
                <!-- 数据统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="stat-card rounded-2xl p-6 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-muted text-sm">总题目数</p>
                                <h3 class="text-3xl font-bold text-dark mt-1">1,284</h3>
                                <p class="text-accent text-sm mt-2 flex items-center">
                                    <i class="ri-arrow-up-line mr-1"></i> 12% 较上月
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary">
                                <i class="ri-question-answer-line text-xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-card rounded-2xl p-6 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-muted text-sm">用户总数</p>
                                <h3 class="text-3xl font-bold text-dark mt-1">3,521</h3>
                                <p class="text-accent text-sm mt-2 flex items-center">
                                    <i class="ri-arrow-up-line mr-1"></i> 8% 较上月
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-secondary/10 rounded-xl flex items-center justify-center text-secondary">
                                <i class="ri-team-line text-xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-card rounded-2xl p-6 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-muted text-sm">今日答题</p>
                                <h3 class="text-3xl font-bold text-dark mt-1">247</h3>
                                <p class="text-muted text-sm mt-2 flex items-center">
                                    <i class="ri-subtract-line mr-1"></i> 与昨日持平
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center text-accent">
                                <i class="ri-checkbox-circle-line text-xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-card rounded-2xl p-6 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-muted text-sm">待审核题目</p>
                                <h3 class="text-3xl font-bold text-dark mt-1">16</h3>
                                <p class="text-primary text-sm mt-2 flex items-center cursor-pointer hover:underline">
                                    <i class="ri-arrow-right-s-line mr-1"></i> 去审核
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary">
                                <i class="ri-time-line text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 数据图表和最近活动 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- 答题趋势图表 -->
                    <div class="lg:col-span-2 bg-white rounded-2xl p-6 shadow-card">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="text-lg font-bold text-dark">本周答题趋势</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-lg">周</button>
                                <button class="px-3 py-1 text-sm text-muted hover:bg-gray-100 rounded-lg">月</button>
                                <button class="px-3 py-1 text-sm text-muted hover:bg-gray-100 rounded-lg">年</button>
                            </div>
                        </div>
                        <div class="chart-container">
                            <!-- 这里会显示答题趋势图表 -->
                            <svg class="w-full h-full" viewBox="0 0 800 200">
                                <defs>
                                    <linearGradient id="primaryGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                        <stop offset="0%" style="stop-color:#2563eb;stop-opacity:1" />
                                        <stop offset="100%" style="stop-color:#4f90ff;stop-opacity:0.5" />
                                    </linearGradient>
                                </defs>
                                <path d="M20,150 C40,120 60,180 80,140 C100,100 120,130 140,110 C160,90 180,120 200,100 C220,80 240,110 260,90 C280,70 300,100 320,80 C340,60 360,90 380,70 C400,50 420,80 440,60 C460,40 480,70 500,50 C520,30 540,60 560,40 C580,20 600,50 620,30 C640,10 660,40 680,20 C700,0 720,30 740,10 C760,-10 780,20 800,0" 
                                      fill="url(#primaryGradient)" fill-opacity="0.2" stroke="#2563eb" stroke-width="2" />
                                <path d="M20,150 C40,120 60,180 80,140 C100,100 120,130 140,110 C160,90 180,120 200,100 C220,80 240,110 260,90 C280,70 300,100 320,80 C340,60 360,90 380,70 C400,50 420,80 440,60 C460,40 480,70 500,50 C520,30 540,60 560,40 C580,20 600,50 620,30 C640,10 660,40 680,20 C700,0 720,30 740,10 C760,-10 780,20 800,0" 
                                      stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <!-- 数据点 -->
                                <circle cx="20" cy="150" r="4" fill="#2563eb" />
                                <circle cx="80" cy="140" r="4" fill="#2563eb" />
                                <circle cx="140" cy="110" r="4" fill="#2563eb" />
                                <circle cx="200" cy="100" r="4" fill="#2563eb" />
                                <circle cx="260" cy="90" r="4" fill="#2563eb" />
                                <circle cx="320" cy="80" r="4" fill="#2563eb" />
                                <circle cx="380" cy="70" r="4" fill="#2563eb" />
                                <circle cx="440" cy="60" r="4" fill="#2563eb" />
                                <circle cx="500" cy="50" r="4" fill="#2563eb" />
                                <circle cx="560" cy="40" r="4" fill="#2563eb" />
                                <circle cx="620" cy="30" r="4" fill="#2563eb" />
                                <circle cx="680" cy="20" r="4" fill="#2563eb" />
                                <circle cx="740" cy="10" r="4" fill="#2563eb" />
                                <circle cx="800" cy="0" r="4" fill="#2563eb" />
                            </svg>
                        </div>
                    </div>
                    
                    <!-- 最近活动 -->
                    <div class="bg-white rounded-2xl p-6 shadow-card">
                        <h3 class="text-lg font-bold text-dark mb-6">最近活动</h3>
                        <div class="space-y-4">
                            <div class="flex items-start space-x-3">
                                <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary mt-1">
                                    <i class="ri-add-line"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-dark">李同学 <span class="text-muted">刚刚</span> 添加了一道数学题</p>
                                    <p class="text-xs text-muted mt-1">代数 > 方程求解</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <div class="w-8 h-8 bg-secondary/10 rounded-full flex items-center justify-center text-secondary mt-1">
                                    <i class="ri-edit-line"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-dark">王老师 <span class="text-muted">10分钟前</span> 编辑了英语试卷</p>
                                    <p class="text-xs text-muted mt-1">英语 > 期末考试卷</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <div class="w-8 h-8 bg-accent/10 rounded-full flex items-center justify-center text-accent mt-1">
                                    <i class="ri-checkbox-line"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-dark">系统 <span class="text-muted">30分钟前</span> 自动备份了题库数据</p>
                                    <p class="text-xs text-muted mt-1">备份编号: BK202306210930</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary mt-1">
                                    <i class="ri-user-add-line"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-dark">管理员 <span class="text-muted">1小时前</span> 添加了新用户</p>
                                    <p class="text-xs text-muted mt-1">张同学 - 学生角色</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <div class="w-8 h-8 bg-secondary/10 rounded-full flex items-center justify-center text-secondary mt-1">
                                    <i class="ri-flag-line"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-dark">系统 <span class="text-muted">2小时前</span> 检测到16道待审核题目</p>
                                    <p class="text-xs text-muted mt-1">
                                        <a href="#" class="text-primary hover:underline">前往审核</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <a href="#" class="mt-6 block text-center text-primary text-sm hover:underline">查看所有活动</a>
                    </div>
                </div>
            </div>
            
            <!-- 题库管理内容 -->
            <div id="question-content" class="content-section hidden">
                <div class="mb-8">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">题库管理</h2>
                    <p class="text-muted mt-2">管理所有试题，支持添加、编辑和分类等操作</p>
                </div>
                <!-- 题库管理内容 -->
                <div class="bg-white rounded-2xl p-6 shadow-card">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                        <div class="flex items-center space-x-2 mb-4 md:mb-0">
                            <button class="px-4 py-2 bg-primary text-white rounded-lg shadow-sm hover:bg-primary/90 transition-colors">
                                <i class="ri-add-line mr-2"></i>添加题目
                            </button>
                            <button class="px-4 py-2 bg-white border border-gray-300 text-dark rounded-lg shadow-sm hover:bg-gray-50 transition-colors">
                                <i class="ri-file-text-line mr-2"></i>导入题目
                            </button>
                        </div>
                        <div class="relative">
                            <input type="text" placeholder="搜索题目..." class="pl-10 pr-4 py-2 w-full md:w-80 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <i class="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-muted"></i>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary" id="select-all">
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题目ID</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题目内容</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题型</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">难度</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary question-checkbox">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-1001</td>
                                    <td class="px-6 py-4 max-w-xs truncate">已知二次函数 y = x² + bx + c 的图像经过点 (1, 0) 和 (2, 5)，求 b 和 c 的值。</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">解答题</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">中等</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">数学 > 代数</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2023-06-20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 mr-3">
                                            <i class="ri-edit-line"></i>
                                        </button>
                                        <button class="text-red-500 hover:text-red-600">
                                            <i class="ri-delete-bin-line"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary question-checkbox">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-1002</td>
                                    <td class="px-6 py-4 max-w-xs truncate">以下哪个是Python的内置函数？</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">选择题</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">简单</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">编程 > Python</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2023-06-19</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 mr-3">
                                            <i class="ri-edit-line"></i>
                                        </button>
                                        <button class="text-red-500 hover:text-red-600">
                                            <i class="ri-delete-bin-line"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary question-checkbox">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-1003</td>
                                    <td class="px-6 py-4 max-w-xs truncate">描述一下HTML5中新增的语义化标签及其作用。</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">简答题</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">中等</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">Web开发 > HTML</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2023-06-18</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 mr-3">
                                            <i class="ri-edit-line"></i>
                                        </button>
                                        <button class="text-red-500 hover:text-red-600">
                                            <i class="ri-delete-bin-line"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary question-checkbox">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-1004</td>
                                    <td class="px-6 py-4 max-w-xs truncate">在SQL中，如何实现两个表的内连接？请给出示例。</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">操作题</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">较难</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">数据库 > SQL</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2023-06-17</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 mr-3">
                                            <i class="ri-edit-line"></i>
                                        </button>
                                        <button class="text-red-500 hover:text-red-600">
                                            <i class="ri-delete-bin-line"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary question-checkbox">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-1005</td>
                                    <td class="px-6 py-4 max-w-xs truncate">什么是算法的时间复杂度？请解释O(1)、O(n)和O(n²)的含义。</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">概念题</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">困难</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">计算机基础 > 算法</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2023-06-16</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 mr-3">
                                            <i class="ri-edit-line"></i>
                                        </button>
                                        <button class="text-red-500 hover:text-red-600">
                                            <i class="ri-delete-bin-line"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="flex items-center justify-between mt-6">
                        <div class="flex items-center space-x-4">
                            <!-- 批量删除按钮 -->
                            <button id="batch-delete-btn" class="hidden px-4 py-2 bg-red-500 text-white rounded-lg shadow-sm hover:bg-red-600 transition-colors">
                                <i class="ri-delete-bin-line mr-2"></i>批量删除
                            </button>
                            <div class="text-sm text-muted">
                                显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">1,284</span> 条
                            </div>
                        </div>
                        <div class="flex space-x-1">
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                <i class="ri-arrow-left-s-line"></i>
                            </button>
                            <button class="px-3 py-1 rounded-lg bg-primary text-white">1</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">2</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">3</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">4</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">5</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">
                                <i class="ri-arrow-right-s-line"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 其他内容区域 (考试管理、数据分析、系统设置) 可以在这里添加 -->
        </div>
    </main>

    <!-- JavaScript 库文件 -->
    <script src="assets/js/tailwind.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#4f90ff',
                        accent: '#10b981',
                        dark: '#1e293b',
                        light: '#f8fafc',
                        muted: '#64748b',
                        'sidebar-bg': '#f8fafc',
                        'sidebar-item': '#64748b',
                        'sidebar-item-active': '#2563eb',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
                        'card-hover': '0 15px 35px -5px rgba(37, 99, 235, 0.15)',
                        'sidebar': '0 0 20px rgba(0, 0, 0, 0.05)',
                    }
                },
            }
        };
    </script>
    
    <!-- 页面功能脚本 -->
    <script>
        // 获取当前日期
        function updateCurrentDate() {
            const now = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
        }
        updateCurrentDate();

        // 导航菜单切换
        const navItems = document.querySelectorAll('.nav-item');
        const sidebarMenus = document.querySelectorAll('.sidebar-menu');

        // 显示指定菜单
        function showMenu(menuId) {
            sidebarMenus.forEach(menu => {
                if (menu.id === menuId) {
                    menu.classList.remove('hidden');
                    menu.classList.add('active');
                    // 激活该菜单的第一个项目
                    const firstItem = menu.querySelector('.sidebar-item');
                    if (firstItem) {
                        menu.querySelectorAll('.sidebar-item').forEach(item => {
                            item.classList.remove('active');
                        });
                        firstItem.classList.add('active');
                    }
                } else {
                    menu.classList.add('hidden');
                    menu.classList.remove('active');
                }
            });
        }

        // 激活指定的导航项和对应的侧边栏菜单
        function activateNavSection(section) {
            // 更新顶部导航状态
            navItems.forEach(nav => {
                if (nav.dataset.section === section) {
                    nav.classList.add('active');
                } else {
                    nav.classList.remove('active');
                }
            });
            
            // 显示对应的侧边栏菜单
            showMenu(`${section}-menu`);
        }

        // 为导航项添加点击事件
        navItems.forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                const section = item.dataset.section;
                activateNavSection(section);
            });
        });

        // 移动端菜单
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const sidebar = document.getElementById('sidebar');

        if (mobileMenuButton && sidebar) {
            mobileMenuButton.addEventListener('click', () => {
                sidebar.classList.toggle('-translate-x-full');
            });
        }

        // 侧边栏菜单项点击
        function initSidebarItems() {
            const sidebarItems = document.querySelectorAll('.sidebar-item');
            sidebarItems.forEach(item => {
                item.addEventListener('click', (e) => {
                    // 防止链接跳转时重复处理
                    if (item.querySelector('a')) {
                        return;
                    }
                    
                    const parentMenu = item.closest('.sidebar-menu');
                    if (parentMenu && !parentMenu.classList.contains('hidden')) {
                        parentMenu.querySelectorAll('.sidebar-item').forEach(si => {
                            si.classList.remove('active');
                        });
                        item.classList.add('active');
                    }
                });
            });
        }

        // 初始化页面时激活仪表盘
        document.addEventListener('DOMContentLoaded', () => {
            activateNavSection('dashboard');
            initSidebarItems();
        });
    </script>
</body>
</html>
